<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <meta name="viewport" content="width=device-width, initial-scale=1">-->
    <script src="vue.min.js"></script>
    <script src="jquery-3.5.1.min.js"></script>
</head>

<body>
    <div id="login">
        <h1>注册(register)</h1>
        <form>
            用户名<font color="red">*</font> <input type="text" v-model="userName"/><br/>
            手机号码<font color="red">*</font> <input type="text" v-model="phoneNumber"/><br/>
            密码<font color="red">*</font> <input type="password" v-model="password1"/><br/>
            重复密码<font color="red">*</font> <input type="password" v-model="password2"/><br/>
            邮箱 <input type="text" v-model="email"/><br/>
            <input type="button" value="注册：/user/user/register" v-on:click="register()"/><br/>
        </form><br/>

        <h1>登陆(login)</h1>
        <form>
            用户名<input type="text" v-model="l_userName"/><br/>
            密码<input type="password" v-model="l_password"/><br/>
            <input type="button" value="登陆：/user/user/login" v-on:click="login()"/><br/>
        </form><br/>
    </div>
</body>

<script>
    let v = new Vue({
        el: "#login",
        data: {
            userName: "",
            phoneNumber: "",
            password1: "",
            password2: "",
            email: "",
            l_userName: "",
            l_password: ""
        },
        methods: {
            login() {
                console.log("check");

                if(this.l_userName.trim().length == 0) {
                    alert("请输入用户名");
                    return;
                }

                if(this.l_password.length == 0) {
                    alert("请输入密码");
                    return;
                }

                console.log("userName: " + this.l_userName.trim());
                console.log("password: " + this.l_password);

                console.log("send");

                $.ajax({
                    type: "POST",
                    url: "http://localhost:88/to_user/user/login",
                    data: {userName: `${this.l_userName}`,
                           password: `${this.l_password}`},
                    dataType: "json",
                    success: function(data){
                        console.log("success");

                        if(data.status == "ok") {
                            this.l_userName = "";
                            this.l_password = "";

                            alert("登陆成功");
                        }
                        else {
                            alert("登陆失败");
                        }
                    },
                    error: function(err){
                        console.log("err");
                    }
                });
            },
            register() {
                console.log("check");

                if(this.userName.trim().length == 0) {
                    alert("请输入用户名");
                    return;
                }

                if(this.phoneNumber.trim().length == 0) {
                    alert("请输入手机号码");
                    return;
                }

                if(this.password1.length == 0) {
                    alert("请输入密码");
                    return;
                }

                if(this.password2 != this.password1) {
                    alert("密码不一致，请检查密码");
                    return;
                }

                console.log("userName: " + this.userName.trim());
                console.log("phoneNumber: " + this.phoneNumber.trim());
                console.log("password: " + this.password1);
                console.log("email: " + this.email.trim());

                console.log("send");

                $.ajax({
                    type: "POST",
                    url: "http://localhost:88/to_user/user/register",
                    data: `{"userName": "${this.userName}",
                            "phoneNumber": "${this.phoneNumber}",
                            "password": "${this.password1}",
                            "email": "${this.email}"
                            }`,
                    dataType: "json",
                    contentType: "application/json",
                    success: function(data){
                        console.log("success");

                        if(data.status == "ok") {
                            this.userName = "";
                            this.phoneNumber = "";
                            this.password1 = "";
                            this.password2 = "";
                            this.email = "";

                            alert("注册成功，你的用户id为：" + data.userId);
                        }
                        else {
                            alert("注册失败，" + data.message);
                        }
                    },
                    error: function(err){
                        console.log("err");
                    }
                });
            }
        }
    });
</script>

</html>